<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .input-group {
            margin-top: 10px;
        }

        input[name="user"],
        input[name="pwd"] {
            border: 1px solid #333;
            outline: none;
        }

        .input-group .focus {
            border-color: pink;
        }
    </style>
</head>

<body>
    <!-- action=""  提交到当前页 => 刷新 -->
    <!-- <form action="" onsubmit="return false"></form> -->
    <form action="">
        <div class="input-group">
            <label for="">用户名:</label>
            <input type="text" name="user">
        </div>

        <div class="input-group">
            <label for="">密&emsp;码:</label>
            <input type="text" name="pwd">
        </div>
        <div class="input-group">
            <label for="">年&emsp;份:</label>
            <select name="year" id="">
                <option value="2001">2001</option>
                <option value="2002">2002</option>
                <option value="2003">2003</option>
                <option value="2004">2004</option>
                <option value="2005">2005</option>
                <option value="2006">2006</option>
                <option value="2007">2007</option>
                <option value="2008">2008</option>
                <option value="2009">2009</option>
                <option value="2010">2010</option>
                <option value="2011">2011</option>
                <option value="2012">2012</option>
                <option value="2013">2013</option>
                <option value="2014">2014</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
                <option value="2021">2021</option>
                <option value="2022">2022</option>
            </select>
        </div>
        <div class="input-group">
            <input type="submit" name="submit">
            <input type="reset" name="reset">
        </div>
    </form>
</body>
<script>
    // 表单事件  (按键控制 按键输入)
    // onfoucs  表单聚焦时触发
    // onblur   表单失焦时触发(每次失焦都会触发)
    // onchange  内容发生改变时触发
    //      用在input textarea   a. 内容改变 + 失焦  b. enter键触发(注意:在form中enter也会触发提交 -> 这种用法不建议在表单中使用)
    //      用在select框 => 下拉框选项切换时触发

    // oninput  内容发生改变时触发

    // onsubmit  表单提交(绑定给form元素,由提交按钮/回车键触发)
    // onreset   表单重置(绑定给form元素,由重置按钮触发)

    var form = document.getElementsByTagName("form")[0];
    var userInp = document.getElementsByName("user")[0];
    var pwdInp = document.getElementsByName("pwd")[0];
    var yearSel = document.getElementsByName("year")[0];
    var submit = document.getElementsByName("submit")[0];
    var reset = document.getElementsByName("reset")[0];

    // userInp.onfocus = function () {
    //     console.log("表单聚焦!");
    //     userInp.classList.add("focus")
    // }

    // userInp.onblur = function () {
    //     console.log("表单失焦!");
    //     userInp.classList.remove("focus")
    // }

    // onchange  内容发生改变时触发
    // userInp.onchange = function () {
    //     console.log("表单内容发生改变时触发", this.value);
    // }

    // yearSel.onchange = function () {
    //     console.log(this.value);
    // }


    // oninput  内容发生改变时触发
    // userInp.oninput = function () {
    //     console.log("表单内容发生改变时触发", this.value);
    // }

    // onsubmit  表单提交(绑定给form元素,由提交按钮/回车键触发)
    // onreset   表单重置绑定给form元素,由重置按钮触发)


    form.onsubmit = function () {
        console.log("表单提交");

        return false; //阻止浏览器的默认行为(表单提交)
    }


    form.onreset = function () {
        console.log("表单重置");

        // return false; //阻止浏览器的默认行为(表单重置)
    }




</script>

</html>